<template>
	<div>
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="900px">
			<div class="search mb15">
				<el-row :gutter="10">
					<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
						<el-form-item label="页面名称:">
							<el-input v-model="state.search.name" size="default" clearable placeholder="请输入页面名称" style="width: 100%"> </el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="创建时间:">
							<el-date-picker
								type="datetimerange"
								v-model="state.search.searchDateTime"
								start-placeholder="创建开始时间"
								end-placeholder="创建时间"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
						<el-form-item class="table-form-btn" label-width="10px">
							<el-button size="default" type="primary" class="ml10" @click="getTableData">
								<el-icon>
									<ele-Search />
								</el-icon>
								查询
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
				<el-table-column prop="urlName" label="页面名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="urlType" label="页面类型" show-overflow-tooltip></el-table-column>
				<el-table-column prop="urlContent" label="页面地址" show-overflow-tooltip></el-table-column>
				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="updateTime" label="修改时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="updateUsername" label="操作人" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onChoice(scope.row)">选择</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:page-sizes="[10, 15, 20, 30, 50, 100]"
				v-model:current-page="state.tableData.paging.currentPage"
				background
				v-model:page-size="state.tableData.paging.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.paging.totalCount"
			>
			</el-pagination>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { dataPageApi } from '/@/api/shop/data/page/index';
import { resolveStartTime, resolveEndTime } from '/@/utils/time/utils';

const emit = defineEmits(['choice']);
const state = reactive({
	isToggle: false,
	search: {
		name: '',
		searchDateTime: '',
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		paging: {
			currentPage: 1,
			pageSize: 15,
			totalCount: 0,
			totalPages: 0,
		},
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '新增页面',
		submitTxt: '新增',
	},
});

const onCancel = () => {
	state.dialog.isShowDialog = false;
};

const onHandleSizeChange = (pageSize: number) => {
	state.tableData.paging.pageSize = pageSize;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (currentPage: number) => {
	state.tableData.paging.currentPage = currentPage;
	getTableData();
};

const getTableData = async () => {
	const { data } = await dataPageApi().search({
		urlName: state.search.name,
		startTime: resolveStartTime(state.search.searchDateTime),
		endTime: resolveEndTime(state.search.searchDateTime),
		offset: (state.tableData.paging.currentPage - 1) * state.tableData.paging.pageSize,
		limit: state.tableData.paging.pageSize,
	});
	state.tableData.data = data.datas;
	state.tableData.paging.currentPage = data.paging.currentPage;
	state.tableData.paging.totalCount = data.paging.totalCount;
	console.log('data: ', data);
};

const onChoice = (row: any) => {
	const cpd: ChoicePageData = {
		id: row.idd,
		urlName: row.urlName,
		urlContent: row.urlContent,
	};
	emit('choice', cpd);
	onCancel();
};

const openDialog = () => {
	state.dialog.isShowDialog = true;
	getTableData();
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss"></style>
